@import '~/common/style/index.scss';
$search-prefix-cls: #{$cui-prefix}-search;

.#{$search-prefix-cls}{
    width: 100%;
    display: flex;
    position: relative;

    &-round{
        .#{$search-prefix-cls}-input{
            border-radius: 24px;
        }
    }
    &-square{
        .#{$search-prefix-cls}-input{
            border-radius: 4px;
        }
    }
    &-input{
        flex: 1;
        height: 36px;
        /* color_neutral/98 */
        background: #fff;
        /* Inside auto layout */
        order: 0;
        border: none;
        outline: none;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        padding: 8px 12px 8px 32px;
        box-sizing: border-box;
        &::placeholder{
            color: #919BA1;
        }
        @media screen and (max-width: 767.98px) {
            font-size: 16px;
        }
    }
    &-icon{
        position: absolute;
        left: 12px;
        top: 10px;
    }
}

.#{$search-prefix-cls}-dark{
    .#{$search-prefix-cls}-input{
        background-color: $gray-2;
        color: $gray-98;
    }
}